<template>
    <div>
        <div class="top_box container_box">
            <p class="page-title font-weight-500">学生列表
                <el-tooltip class="item"
                            effect="dark"
                            content="刷新"
                            placement="right">
                    <el-button class="refresh-btn"
                               icon="el-icon-refresh"
                               type="primary"
                               circle
                               plain
                               @click="getTableData"
                               size="mini"></el-button>
                </el-tooltip>
            </p>
        </div>
        <div class="padding_box">
            <div class="search_box container_box">
                <div>
                    <el-form :inline="true"
                             label-width="80px"
                             :model="queryData">
                        <!-- <el-form-item label="">
                            <el-input clearable
                                      v-model="queryData.productName"
                                      placeholder="请输入商品名称"></el-input>
                        </el-form-item> -->
                        <el-form-item label="">
                            <el-cascader clearable
                                         filterable
                                         :show-all-levels="false"
                                         separator=">"
                                         placeholder="请选择兴趣班"
                                         v-model="queryData.curriculum"
                                         :options="curriculumList"
                                         :props="{ expandTrigger: 'hover', checkStrictly: true, value:'id',label:'name',children:'subCategory', }">
                                <template slot-scope="{ node, data }">
                                    <span>{{ data.name }}</span>
                                    <span v-if="!node.isLeaf"> ({{ data.subCategory.length }}) </span>
                                </template>
                            </el-cascader>
                        </el-form-item>
                        <el-form-item label="">
                            <el-cascader clearable
                                         filterable
                                         :show-all-levels="false"
                                         separator=">"
                                         v-model="queryData.class"
                                         placeholder="请选择年/班级"
                                         :options="classList"
                                         :props="{ expandTrigger: 'hover', checkStrictly: true, value:'id',label:'name',children:'subCategory', }">
                                <template slot-scope="{ node, data }">
                                    <span>{{ data.name }}</span>
                                    <span v-if="!node.isLeaf"> ({{ data.subCategory.length }}) </span>
                                </template>
                            </el-cascader>
                        </el-form-item>
                        <el-form-item label="">
                            <el-autocomplete popper-class="my-autocomplete"
                                             placeholder="请输入学生或家长名称"
                                             clearable
                                             :trigger-on-focus="false"
                                             v-model="referrerBy"
                                             :debounce="500"
                                             :fetch-suggestions="querySearchAsync"
                                             @select="handleSelectReferrerBy">
                                <template slot-scope="{ item }">
                                    <div v-if="item.nickName"
                                         class="name">{{ item.nickName }} {{ '（' + item.telNo + '）' }}</div>
                                    <div v-else
                                         class="name">无匹配数据</div>
                                </template>
                            </el-autocomplete>
                        </el-form-item>
                        <el-form-item label="">
                            <el-date-picker v-model="queryTime"
                                            type="daterange"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>

                    </el-form>
                </div>
                <div class="right-box u-flex u-row-between">
                    <div>
                        <el-button @click="exportExcel"
                                   icon="el-icon-download">导出数据</el-button>
                    </div>
                    <div>
                        <el-button type="primary"
                                   @click="getTableData">搜索</el-button>
                        <el-button icon="el-icon-refresh-left"
                                   @click="cleanQueryData">清空筛选</el-button>
                    </div>

                </div>
            </div>
            <div class="container_box">
                <div class="order_title">
                    报名列表
                </div>
                <el-divider></el-divider>
                <el-table v-loading="loading"
                          :data="tableData"
                          stripe
                          class="my_table"
                          ref="multipleTable"
                          header-cell-class-name="table-header">

                    <el-table-column prop=""
                                     align="center"
                                     label="兴趣班">
                        <template slot-scope="scope">
                            <curriculum-card :cardData="scope.row.curriculum"></curriculum-card>
                        </template>
                    </el-table-column>
                    <el-table-column label="姓名"
                                     prop="name"
                                     align="center">
                        <template slot-scope="scope">
                            <business-card :cardData="scope.row.cardData"></business-card>
                        </template>

                    </el-table-column>
                    <!-- <el-table-column prop="sex"
                                     label="性别"
                                     align="center">
                        <template slot-scope="scope">
                            {{ scope.row.cardData.sex == 1 ? '男':'女'}}
                        </template>
                    </el-table-column> -->
                    <!-- <el-table-column prop=""
                                     label="班级"
                                     align="center">
                        <template slot-scope="scope">
                            <el-tag>
                                {{ scope.row.cardData.Class}}
                            </el-tag>
                        </template>
                    </el-table-column> -->
                    <el-table-column prop=""
                                     label="家长"
                                     align="center">
                        <template slot-scope="scope">
                            {{ scope.row.cardData.parentName }}
                        </template>
                    </el-table-column>
                    <el-table-column prop=""
                                     label="家长电话"
                                     align="center">
                        <template slot-scope="scope">
                            {{ scope.row.cardData.parentPhone }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"
                                     fixed="right"
                                     width="180"
                                     align="center">
                        <template slot-scope="scope">
                            <el-button size="mini"
                                       type="success"
                                       @click="editUser(scope.row)">修改</el-button>
                            <!-- <el-button size="mini"
                                       type="warning"
                                       @click="deleteUser(scope.row.id)">删除</el-button> -->
                            <el-button size="mini"
                                       type="primary"
                                       @click="UserDetails(scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination background
                                   layout="total, prev, pager, next,sizes, jumper"
                                   :current-page="queryData.pageIndex"
                                   :page-size="queryData.pageSize"
                                   :page-sizes="[5, 10, 20, 40]"
                                   :total="pageTotal"
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
        <!-- 添加弹出框 -->
        <el-dialog title="添加用户"
                   :visible.sync="showEdit"
                   width="50%">
            <el-form :model="currentEditUser"
                     label-width="120px">
                <el-form-item label="">
                    <el-cascader clearable
                                 filterable
                                 :show-all-levels="false"
                                 separator=">"
                                 placeholder="请选择兴趣班"
                                 v-model="queryData.curriculum"
                                 :options="curriculumList"
                                 :props="{ expandTrigger: 'hover', checkStrictly: true, value:'id',label:'name',children:'subCategory', }">
                        <template slot-scope="{ node, data }">
                            <span>{{ data.name }}</span>
                            <span v-if="!node.isLeaf"> ({{ data.subCategory.length }}) </span>
                        </template>
                    </el-cascader>
                </el-form-item>
                <el-form-item label="">
                    <el-cascader clearable
                                 filterable
                                 :show-all-levels="false"
                                 separator=">"
                                 v-model="queryData.class"
                                 placeholder="请选择年/班级"
                                 :options="gradeList"
                                 :props="{ expandTrigger: 'hover', checkStrictly: false, value:'id',label:'name',children:'children', }">
                        <template slot-scope="{ node, data }">
                            <span>{{ data.name }}</span>
                            <!-- <span v-if="!node.isLeaf"> ({{ data.subCategory.length }}) </span> -->
                        </template>
                    </el-cascader>
                </el-form-item>
                <!-- <el-form-item label="出生日期">
                    <el-date-picker v-model="currentEditUser.birthDate"
                                    value-format="yyyy-MM-dd"
                                    type="date"
                                    placeholder="选择日期">
                    </el-date-picker>
                </el-form-item> -->
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="showEdit = false">取 消</el-button>
                <el-button type="primary"
                           @click="saveEditUser"
                           v-preventClick>确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import axios from '@/utils/axios.js';
import businessCard from '@/components/business-card/business-card.vue'
import curriculumCard from '@/components/curriculum-card/curriculum-card.vue'
import { exportExcel } from '@/utils/exportExcel.js'

export default {
    name: 'basetable',
    components: {
        businessCard, curriculumCard
    },
    data() {
        return {
            pageTotal: 0,
            loading: false,
            tableData: [
                { id: 1, cardData: { studuentName: '张晓明', sex: 1, parentName: '张大强', parentPhone: 15689325446, school: '光明小学', Class: '二年一班' }, curriculum: { id: 11, curriculumName: '金话筒主持人', address: '教学楼302', teacherName: '王老师', teacherPhone: '14586932551', time: '16:00 ~ 16:45', grade: '一年级' }, },
                { id: 2, cardData: { studuentName: '龙傲天', sex: 1, parentName: '龙全智', parentPhone: 15689365321, school: '光明小学', Class: '二年三班' }, curriculum: { id: 22, curriculumName: '篮球', address: '篮球场A1', teacherName: '张老师', teacherPhone: '14586932551', time: '16:00 ~ 16:45', grade: '二年级' }, },
                { id: 3, cardData: { studuentName: '李叶青', sex: 2, parentName: '李力旺', parentPhone: 15689312458, school: '光明小学', Class: '四年一班' }, curriculum: { id: 13, curriculumName: '少儿编程', address: '实训楼202', teacherName: '马老师', teacherPhone: '14586932551', time: '16:00 ~ 16:45', grade: '三年级' }, },
                { id: 4, cardData: { studuentName: '王林', sex: 1, parentName: '王建立', parentPhone: 15689332215, school: '光明小学', Class: '五年四班' }, curriculum: { id: 14, curriculumName: '书法', address: '图书馆302', teacherName: '李老师', teacherPhone: '14586932551', time: '16:00 ~ 16:45', grade: '一年级' }, },
                { id: 5, cardData: { studuentName: '彭小草', sex: 2, parentName: '彭小花', parentPhone: 15689325446, school: '光明小学', Class: '一年一班' }, curriculum: { id: 25, curriculumName: '羽毛球', address: '羽毛球场A2', teacherName: '孔老师', teacherPhone: '14586932551', time: '16:00 ~ 16:45', grade: '四年级' }, },
                { id: 5, cardData: { studuentName: '彭小草', sex: 2, parentName: '彭小花', parentPhone: 15689325446, school: '光明小学', Class: '一年一班' }, curriculum: { id: 26, curriculumName: '乒乓球', address: '乒乓球场B2', teacherName: '彭老师', teacherPhone: '14586932551', time: '16:00 ~ 16:45', grade: '一年级' }, },
                { id: 5, cardData: { studuentName: '彭小草', sex: 2, parentName: '彭小花', parentPhone: 15689325446, school: '光明小学', Class: '一年一班' }, curriculum: { id: 27, curriculumName: '足球', address: '足球场A2', teacherName: '黄老师', teacherPhone: '14586932551', time: '16:00 ~ 16:45', grade: '五年级' }, },
                { id: 5, cardData: { studuentName: '彭小草', sex: 2, parentName: '彭小花', parentPhone: 15689325446, school: '光明小学', Class: '一年一班' }, curriculum: { id: 18, curriculumName: '漫画', address: '教学楼101', teacherName: '刘老师', teacherPhone: '14586932551', time: '16:00 ~ 16:45', grade: '六年级' }, },
            ],

            referrerBy: '',
            queryData: {
                pageNum: 1,
                pageSize: 10,
                referrerBy: '',
            },
            queryTime: '',
            showEdit: false,
            currentEditUser: {},
            curriculumList: [
                {
                    id: 1, name: '综合类',
                    subCategory: [
                        { id: 11, name: '金话筒主持人' }, { id: 13, name: '少儿编程' }, { id: 18, name: '漫画' }, { id: 14, name: '书法' },
                    ]
                },
                {
                    id: 2, name: '体育类',
                    subCategory: [
                        { id: 22, name: '篮球' },
                        { id: 25, name: '羽毛球' }, { id: 26, name: '乒乓球' }, { id: 27, name: '足球' },
                    ]
                },

            ],
            gradeList: [
                { id: 1, name: '一年级', }, { id: 2, name: '二年级', }, { id: 3, name: '三年级', }, { id: 4, name: '四年级', },
                { id: 5, name: '五年级', }, { id: 6, name: '六年级', },
            ],
            classList: [
                {
                    id: 1, name: '一年级',
                    subCategory: [
                        { id: 11, name: '一年一班', },
                        { id: 12, name: '一年二班', },
                        { id: 13, name: '一年三班', },
                        { id: 14, name: '一年四班', },
                        { id: 15, name: '一年五班', },
                    ]
                },
                {
                    id: 2, name: '二年级',
                    subCategory: [
                        { id: 21, name: '二年一班', },
                        { id: 22, name: '二年二班', },
                        { id: 23, name: '二年三班', },
                        { id: 24, name: '二年四班', },
                        { id: 25, name: '二年五班', },
                    ]
                },
                {
                    id: 3, name: '三年级',
                    subCategory: [
                        { id: 31, name: '三年一班', },
                        { id: 32, name: '三年二班', },
                        { id: 33, name: '三年三班', },
                        { id: 34, name: '三年四班', },
                        { id: 35, name: '三年五班', },
                    ]
                },
                {
                    id: 4, name: '四年级',
                    subCategory: [
                        { id: 41, name: '四年一班', },
                        { id: 42, name: '四年二班', },
                        { id: 43, name: '四年三班', },
                        { id: 44, name: '四年四班', },
                        { id: 45, name: '四年五班', },
                    ]
                },
                {
                    id: 5, name: '五年级',
                    subCategory: [
                        { id: 51, name: '五年一班', },
                        { id: 52, name: '五年二班', },
                        { id: 53, name: '五年三班', },
                        { id: 54, name: '五年四班', },
                        { id: 55, name: '五年五班', },
                    ]
                },
                {
                    id: 6, name: '六年级',
                    subCategory: [
                        { id: 61, name: '六年一班', },
                        { id: 62, name: '六年二班', },
                        { id: 63, name: '六年三班', },
                        { id: 64, name: '六年四班', },
                        { id: 65, name: '六年五班', },
                    ]
                },
            ],
        };
    },
    watch: {
        queryTime: {
            handler(newV, oldValue) {
                if (newV && newV.length > 0) {
                    this.queryData.startTime = newV[0] + ' 00:00:00'
                    this.queryData.endTime = newV[1] + ' 23:59:59'
                } else {
                    delete this.queryData.startTime
                    delete this.queryData.endTime
                }
            }
        },
        referrerBy(newV) {
            if (newV.length == 0) {
                this.queryData.referrerBy = ''
            }
        },
    },
    filters: {

    },
    created() {
        this.getTableData();
    },
    methods: {
        getTableData() {
            var _this = this;
            this.loading = true
            axios({
                url: "/user/listUser",
                method: "post",
                data: this.queryData,
            }).then(res => {
                if (res.code == 0) {
                    // _this.tableData = res.result.list;
                    // _this.pageTotal = res.result.total;
                }
                this.loading = false;
            }).catch(err => {
                this.loading = false;
            })
        },
        cleanQueryData() {
            this.queryData = {}
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.queryData.pageSize = val
            this.getTableData()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.queryData.pageNum = val
            this.getTableData()
        },
        // 导出
        exportExcel() {
            exportExcel('用户列表', '')
        },
        //用户详情
        UserDetails(row) {
            // this.$router.push({ path: '/UserDetails', query: { userId: row.id } });
        },
        editUser(currentUser) {
            this.currentEditUser = currentUser
            this.showEdit = true
        },
        saveEditUser() {
            axios({
                url: "/user/update",
                method: "post",
                data: this.currentEditUser,
            }).then(res => {
                if (res.code == 0) {
                    this.$message.success(res.errMsg || '修改成功')
                    this.showEdit = false
                    this.getTableData()
                } else {
                    this.$message.error(res.errMsg || '修改失败')
                }

            }).catch(err => {

            })
        },
        // 删除用户
        deleteUser(id) {
            this.$confirm('确定要删除当前用户？', '提示', {
                type: 'warning'
            }).then(() => {
                let data = {
                    id: id,
                }
                axios({
                    url: "/user/delete",
                    method: "POST",
                    data
                }).then(result => {
                    if (result.code == 0) {
                        this.$message.success(result.errMsg || '修改成功')
                        this.getTableData()
                    } else {
                        this.$message.error(result.errMsg || '修改失败')
                    }
                })
            }).catch(() => {
            })
        },
        querySearchAsync(queryString, cb) {
            if (queryString.length > 0) {
                let data = {
                    keyword: queryString
                }
                // apis.getBreviaryPage(data).then(res => {
                //     let arr = []
                // if (res.resp_code == 0 && res.data.list) {
                // if (res.data.list && res.data.list.length > 0) {
                //     res.data.list.forEach(ele => {

                if (this.tableData.length > 0) {
                    this.tableData.forEach(ele => {
                        arr.push({
                            memberId: ele.memberId,
                            nickName: ele.nickName,
                            class: ele.class,
                            parentName: ele.parentName,
                            parentPhone: ele.parentPhone,
                            value: ele.nickName + '(' + ele.class + ')' + '家长：' + ele.parentName
                        })
                    });
                    cb(arr);
                } else {
                    let arr = [{ value: '无匹配数据' }]
                    cb(arr);
                }
                // }
                // })
            }
        },
        // 点击查询数据
        handleSelectReferrerBy(item) {
            this.queryData.referrerBy = item.memberId
        },
    }
};
</script>

<style lang="scss" scoped >
.my-switchStyle {
    margin-right: 25px;
}
.my-switchStyle {
    ::v-deep {
        .el-switch__label {
            position: absolute;
            display: none;
            color: #fff;
        }
        .el-switch__label--left {
            z-index: 9;
            left: 6px;
        }
        .el-switch__label--right {
            z-index: 9;
            left: -16px;
        }
        .el-switch__label.is-active {
            display: block;
        }
        .el-switch__label * {
            font-size: 12px;
        }
        .el-switch__core,
        .el-switch__label {
            width: 52px !important;
        }
    }
}
</style>
<style lang="scss">
.my-autocomplete {
    li {
        line-height: normal;
        padding: 7px;

        .name {
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .addr {
            font-size: 12px;
            color: #b4b4b4;
        }

        .highlighted .addr {
            color: #ddd;
        }
    }
}
</style>
